<template>
  <div class="addMailFormTwo">
    <el-form :model="addMailFormTwo" :inline="false" ref="addMailFormTwo" :rules="rules" label-width="150px">
      <el-form-item prop="skillGroup" :label="$t('config.channel.accessSkillGroupName') + ':'" class="form_item_li">
        <el-select size="mini" v-model="addMailFormTwo.skillGroup" class="select">
          <el-option
            v-for="item in options"
            :label="item.DisplayName"
            :value="item.Exten">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="signature" :label="$t('config.channel.emailSignature') + ':  '" class="form_item_li">
        <el-select size="mini" v-model="addMailFormTwo.signature" class="select">
          <el-option
            v-for="item in signs"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.mailTip10')" style="text-align: left;">
        <el-radio-group v-model.trim="addMailFormTwo.seatSendEvaluation">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.mailTip11')" style="text-align: left;">
        <el-radio-group v-model.trim="addMailFormTwo.systemSendEvaluation">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
        <p class="tip">{{$t('configLazyLoad.channel.mailTip21')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.mailTip12')" style="text-align: left;">
        <el-radio-group v-model.trim="addMailFormTwo.isOpen">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="addMailFormTwo.isOpen" prop="signature" :label="$t('config.channel.emaiTimeOutNotify') + ':  '" class="form_item_li">
        <el-row>
          <el-col :span="10">
            <el-input type="number" :min="0" v-model="addMailFormTwo.num" :placeholder="$t('public.pleaseInput')" @change="changeNum"></el-input>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-select size="mini" v-model="addMailFormTwo.unit" class="select">
              <el-option
                v-for="item in timeOptions"
                :label="item.label"
                :value="item.val">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" :offset="1">
            <question-tooltip
              class="wechatTootip fl"
              :direction="'bottom'"
              :tipContent="$t('configLazyLoad.channel.mailTip13')">
            </question-tooltip>
          </el-col>
          <el-col :span="24">
            <p class="email_tips">{{$t('configLazyLoad.channel.mailTip14')}}</p>
          </el-col>
          <el-col :span="24">
            <p style="color: #262626;margin-top: 10px;text-align: left;">{{$t('configLazyLoad.channel.mailTip15')}}</p>
          </el-col>
          <el-col class="form_agent">
            <div class="follow-agent-wrap" v-show="folllowedAgents.length">
                  <span class="follow-agent follow-common" v-for="item in folllowedAgents" :key="item._id">{{item.label}}
                    <i class="el-icon-close" @click.stop="closeFollowedAgents(item._id)"></i>
                  </span>
            </div>
            <el-popover
              ref="popover4"
              placement="bottom"
              @show="popoverShow"
              width="240"
              trigger="click">
              <agent-tree :readSeat="folllowedAgents" ref="agentTree" @saveFollowedAgents="saveFollowedAgents"></agent-tree>
            </el-popover>
            <span class="follow-agent-add follow-common fl"  v-popover:popover4><i class="el-icon-plus"></i> {{$t('public.add')}}</span>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-show="addMailFormTwo.isOpen" prop="signature" :label="$t('configLazyLoad.channel.mailTip16')" class="form_item_li">
        <el-row>
          <el-col :span="10">
            <el-input type="number" :min="0" v-model="addMailFormTwo.beforeNum" :placeholder="$t('public.pleaseInput')" @change="changeNum"></el-input>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-select size="mini" v-model="addMailFormTwo.beforeUnit" class="select">
              <el-option
                v-for="item in timeOptions"
                :label="item.label"
                :value="item.val">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <span style="color: #262626; margin-left: 5px;">{{$t('email.RemindAgents')}}</span>
          </el-col>
          <el-col :span="24">
            <p class="email_tips">
              {{$t('email.processTimeoutConfigDetial')}}
            </p>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.mailTip65')" style="text-align: left;">
        <el-radio-group v-model.trim="addMailFormTwo.smtpSend">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
          <p class="tip">{{$t('configLazyLoad.channel.mailTip68')}}</p>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="addMailFormTwo.smtpSend" :label="$t('configLazyLoad.channel.mailTip66')" style="text-align: left;">
        <el-input v-model.trim="addMailFormTwo.smtpHost" ></el-input>
        <p class="tip">{{$t('configLazyLoad.channel.mailTip69')}}</p>
      </el-form-item>
      <el-form-item v-show="addMailFormTwo.smtpSend" :label="$t('configLazyLoad.channel.mailTip67')" style="text-align: left;">
        <el-input v-model.trim="addMailFormTwo.smtpPassword" ></el-input>
        <p class="tip">{{$t('configLazyLoad.channel.mailTip70')}}</p>
      </el-form-item>
      <el-form-item v-show="addMailFormTwo.smtpSend" :label="$t('configLazyLoad.channel.mailTip73')" style="text-align: left;">
        <el-radio-group v-model.trim="addMailFormTwo.sslSend">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="addMailFormTwo.smtpSend" :label="$t('configLazyLoad.channel.mailTip74')" style="text-align: left;">
        <el-radio-group v-model.trim="addMailFormTwo.authSend">
          <el-radio :label="true">{{$t('config.agent.open')}}</el-radio>
          <el-radio :label="false">{{$t('config.agent.close')}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button class="primary_btn" @click="cancel">{{$t('public.cancel')}}</el-button>
      <el-button class="primary_btn" @click="next('addMailFormTwo')" type="primary">{{$t('public.nextStep')}}</el-button>
    </div>
  </div>
</template>
<script>
  import {getCache, deepClone} from '@/utils/m7Utils.js'
  import questionTooltip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
  import AgentTree from '@/components/public-modules/cust-tab-content/business/agentTree.vue'
  export default {
    name: 'FirmMailAddTwo',
    data () {
      return {
        addMailFormTwo: {
          skillGroup: '',
          signature: '',
          num: 0,
          beforeNum: 0,
          beforeUnit: 'minute',
          isOpen: false,
          unit: 'minute',
          seatSendEvaluation: false, // 座席发送满意度评价
          systemSendEvaluation: false, // 系统发送满意度评价
          remindUser: [],
          smtpSend: false,
          smtpHost: '',
          smtpPassword: '',
          sslSend: false,
          authSend: false
        },
        rules: {
          skillGroup: [
            {required: true, message: this.$t('email.chooseSkillGroup'), trigger: 'change'}
          ]
        },
        timeOptions: [{
          label: this.$t('public.minutes2'),
          val: 'minute'
        }, {
          label: this.$t('public.hours2'),
          val: 'hour'
        }]
      }
    },
    components: {
      AgentTree,
      questionTooltip
    },
    computed: {
      emailDomain () {
        let emailName = this.$store.state.config.channelConfig.channelMail.mailInfo.uname
        let email = this.$store.state.config.channelConfig.channelMail.mailInfo.emailDomain
        return emailName + '@' + email
      },
      options () {
        let mailQueues = deepClone(getCache('mailQueues'))
        this.addMailFormTwo.skillGroup = mailQueues && mailQueues[0].Exten
        return mailQueues
      },
      signs () {
        let signs = deepClone(getCache('emailSign'))
        let signNew = [{ name: this.$t('public.pleasePick'), _id: '' }, ...signs]
        return signNew
      },
      folllowedAgents () {
        let agents = this.addMailFormTwo.remindUser || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          return {_id: item.userId, label: agentsAll[item.userId].displayName}
        })
      }
    },
    methods: {
      cancel () {
        this.$emit('cancel')
      },
      popoverShow () {
        this.$refs.agentTree.setCheckedKeys()
      },
      saveFollowedAgents (agents) {
        let arr = deepClone(agents)
        this.addMailFormTwo.remindUser = []
        arr.forEach((item, index) => {
          this.addMailFormTwo.remindUser.push({userId: item})
        })
        document.getElementsByTagName('body')[0].click()
      },
      closeFollowedAgents (agent) {
        this.addMailFormTwo.remindUser = this.addMailFormTwo.remindUser.filter((item) => item.userId !== agent)
      },
      changeNum () {
        if (parseFloat(this.addMailFormTwo.num) <= 0) {
          this.$message.error(this.$t('email.emailTimeOutTip2'))
          this.addMailFormTwo.num = 0
          return false
        }
        if (parseFloat(this.addMailFormTwo.beforeNum) <= 0) {
          this.$message.error(this.$t('email.emailTimeOutTip3'))
          this.addMailFormTwo.beforeNum = 0
          return false
        }
        if (this.addMailFormTwo.beforeUnit === this.addMailFormTwo.unit && parseFloat(this.addMailFormTwo.num) <= parseFloat(this.addMailFormTwo.beforeNum)) {
          this.$message.error(this.$t('email.emailTimeOutTip1'))
          return false
        }
        if (this.addMailFormTwo.beforeUnit !== this.addMailFormTwo.unit && this.addMailFormTwo.beforeUnit === 'hour' && parseFloat(this.addMailFormTwo.num) <= parseFloat(this.addMailFormTwo.beforeNum) * 60) {
          this.$message.error(this.$t('email.emailTimeOutTip1'))
          return false
        }
        if (this.addMailFormTwo.beforeUnit !== this.addMailFormTwo.unit && this.addMailFormTwo.unit === 'hour' && parseFloat(this.addMailFormTwo.num) * 60 <= parseFloat(this.addMailFormTwo.beforeNum)) {
          this.$message.error(this.$t('email.emailTimeOutTip1'))
          return false
        }
        return true
      },
      next (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addMailFormTwo.smtpSend) {
              if (!this.addMailFormTwo.smtpHost) {
                this.$message.error(this.$t('configLazyLoad.channel.mailTip71'))
                return
              }
              if (!this.addMailFormTwo.smtpPassword) {
                this.$message.error(this.$t('configLazyLoad.channel.mailTip72'))
                return
              }
            }
            if (!this.addMailFormTwo.isOpen) {
              this.$emit('addMail')
            } else {
              if (!this.changeNum()) {
                return
              }
              if (this.addMailFormTwo && !this.addMailFormTwo.remindUser.length) {
                this.$message.error(this.$t('configLazyLoad.channel.mailTip17'))
                return
              }
              this.$emit('addMail')
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .addMailFormTwo
    text-align: center
    width: 500px
    margin: 0 auto
  .buttons
    margin-top 20px
  .select
    width 100%
  .el-tooltip
    position: absolute;
    top: 24px;
    right: -30px;
  .email_tips
    color #737373
    text-align left
  .wechatTootip
    margin-left 20px
    margin-top 3px
  .tip
    color #737373
    font-size 12px
</style>
